<template>
  <div v-if="query.associationId === ''">
    <div class="my-code">点击左侧查看校友会详情</div>
  </div>
  <!--工具栏-->
  <div v-else>
    <div>
      <el-row :gutter="0.5" type="flex" justify="start" class="el-row">
        <el-col :span="3">
          <div class="grid-content bg-purple" style="text-align: right;">名称：</div>
        </el-col>
        <el-col :span="20">
          <div class="grid-content bg-purple" style="text-align: left;">{{ temp.name }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="0.5" type="flex" justify="start" class="el-row">
        <el-col :span="3">
          <div class="grid-content bg-purple" style="text-align: right;">创建者：</div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple" style="text-align: left;">{{ temp.createBy }}</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple" style="text-align: right;">创建时间：</div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple" style="text-align: left;">{{ parseTime(temp.createTime) }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="0.5" type="flex" justify="start" class="el-row">
        <el-col :span="3">
          <div class="grid-content bg-purple" style="text-align: right;">审核者：</div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple" style="text-align: left;">{{ temp.reviewer.username }}</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple" style="text-align: right;">审核时间：</div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple" style="text-align: left;">{{ parseTime(temp.reviewTime) }}</div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="start" class="el-row">
        <el-col :span="3">
          <div class="grid-content bg-purple" style="text-align: right;">简介：</div>
        </el-col>
        <el-col :span="20">
          <div class="grid-content bg-purple" style="text-align: left;">{{ temp.brief }}</div>
        </el-col>
      </el-row>
    </div>
    <div style="margin-top: 10px;">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>校友会人员名单</span>
        </div>
        <div>
          <!-- 搜索 -->
          <label class="el-form-item-label">姓名</label>
          <el-input
            v-model="query.name"
            clearable
            placeholder="姓名"
            style="width: 160px;"
            class="filter-item"
            @keyup.enter.native="crud.toQuery"
          />
          <label class="el-form-item-label">人员类型</label>
          <el-select
            v-model="query.type"
            clearable
            size="small"
            placeholder="类型"
            class="filter-item"
            style="width: 120px"
            @change="crud.toQuery"
          >
            <el-option v-for="item in dict.user_type" :key="item.id" :label="item.label" :value="item.value" />
          </el-select>
          <rrOperation :crud="crud" />
        </div>
        <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
        <crudOperation :permission="permission" />

        <!--表单组件-->
        <el-dialog
          v-if="crud.status.cu"
          :close-on-click-modal="false"
          :before-close="crud.cancelCU"
          :visible.sync="crud.status.cu > 0"
          :title="crud.status.title"
          width="950px"
        >
          <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
            <selectAssUser ref="selectAssUser" :association-id="form.associationId" :permission="permission" />
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="crud.cancelCU(); crud.refresh()">关闭</el-button>
          </div>
        </el-dialog>
        <!--表格渲染-->
        <el-table
          ref="table"
          v-loading="crud.loading"
          :data="crud.data"
          size="small"
          style="width: 100%;"
          @selection-change="crud.selectionChangeHandler"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="type" label="人员类型">
            <template slot-scope="scope">
              {{ dict.label.user_type[scope.row.type] }}
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
      </el-card>
    </div>
  </div>
</template>

<script>
import crudAssociationUserInfo from '@/api/anniversary/associationUserInfo'
import CRUD, {
  presenter,
  header,
  form,
  crud
} from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
import selectAssUser from './selectAssUser'

const defaultForm = {
  id: null,
  name: null,
  associationId: null,
  userId: null,
  type: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
  sort: null,
  remark: null,
  isEnable: null
}
export default {
  name: 'AssociationUserInfo',
  components: {
    crudOperation,
    rrOperation,
    pagination,
    selectAssUser
  },
  mixins: [presenter(), header(), form(function() {
    return Object.assign({
      associationUserInfo: {
        id: this.associationId
      }
    }, defaultForm)
  }), crud()],
  dicts: ['user_type', 'data_status'],
  cruds() {
    return CRUD({
      title: '校友会人员',
      url: 'api/associationUserInfo',
      sort: 'id,desc',
      query: {
        associationId: ''
      },
      crudMethod: { ...crudAssociationUserInfo
      },
      queryOnPresenterCreated: false
    })
  },
  data() {
    return {
      temp: {
        id: null,
        name: null,
        userId: null,
        type: null,
        brief: null,
        verifyStatus: '0',
        creater: null,
        createTime: null,
        reviewer: null,
        reviewTime: null,
        sort: 999,
        remark: null,
        isEnable: false
      },
      associationId: null,
      type: null,
      person: {
        id: null,
        name: null,
        associationId: null,
        userId: null,
        type: null,
        birth: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        sort: null,
        remark: null,
        isEnable: null
      },
      userInfo: null,
      permission: {
        add: ['admin', 'associationUserInfo:add'],
        edit: ['admin', 'associationUserInfo:edit'],
        del: ['admin', 'associationUserInfo:del']
      },
      rules: {}
    }
  },
  methods: {
    // 新增与编辑前做的操作
    // [CRUD.HOOK.beforeSubmit]() {
    // },
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      // 预设不需要输入的值
      defaultForm.associationId = this.associationId
      return true
    },
    // 改变状态
    changeEnabled(data, val) {
      this.$confirm('此操作将 "' + this.dict.label.data_status[val] + '" ' + data.name + ', 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        crudAssociationUserInfo.edit(data).then(res => {
          this.crud.notify(this.dict.label.data_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
        }).catch(() => {
          data.isEnable = !data.isEnable
        })
      }).catch(() => {
        data.isEnable = !data.isEnable
      })
    },
    refresh(val) {
      this.form.name = val.name
      this.form.userId = val.userId
      this.form.associationId = this.associationId
      this.form.createBy = val.createBy
      this.form.sort = val.sort
      this.form.remark = val.remark
      this.form.isEnable = true
    }
  }
}
</script>

<style scoped>

</style>

<style>
	.el-row {
		margin-bottom: 10px;
		display: flex;
		flex-wrap: wrap
	}
</style>
